<template>
  <view class="driver-life-page">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
    <!-- 顶部地图搜索区域 -->
    <view class="map-header-section">
      <image src="/static/images/lixing-life.png" class="lixing-life" mode="aspectFit" />
      <view class="seperator-line"></view>
      <image src="/static/images/slogan.png" class="slogan" mode="aspectFit" />
    </view>
    
    <view class="page-main">
      <!-- 当前位置 -->
      <view class="location-section">
        <view class="location-info">
          <image src="/static/images/location.png" class="map-icon" mode="aspectFit" />
          <text class="location-text">上海市</text>
          <image src="/static/images/under-arrow.png" class="map-icon" mode="aspectFit" />
        </view>
      </view>
      
      <!-- 功能导航区 -->
      <view class="function-nav-section">
        <view class="function-grid">
          <view class="first-row">
            <view class="function-item" @click="goToElectricCharging">
              <image src="/static/images/charge.png" class="function-icon-first" mode="aspectFit" />
              <text class="function-text">充电</text>
            </view>
            <view class="function-item" @click="goToRentCar">
              <image src="/static/images/car-trade.png" class="function-icon-first" mode="aspectFit" />
              <text class="function-text">租买车</text>
            </view>
            <view class="function-item" @click="goToFoodSupermarket">
              <image src="/static/images/market.png" class="function-icon-first" mode="aspectFit" />
              <text class="function-text">餐超</text>
            </view>
            <view class="function-item" @click="goToVehicleService">
              <image src="/static/images/maintain.png" class="function-icon-first" mode="aspectFit" />
              <text class="function-text">维修保养</text>
            </view>
          </view>
          <view class="second-row">
            <view class="function-item" @click="goToRewardCenter">
              <image src="/static/images/points-mall.png" class="function-icon" mode="aspectFit" />
              <text class="function-text">积分商城</text>
            </view>
            <!-- <view class="function-item" @click="goToRewardCenter">
              <image src="/static/images/gift.png" class="function-icon" mode="aspectFit" />
              <text class="function-text">奖励中心</text>
            </view> -->
            <view class="function-item" @click="goToVehicleService">
              <image src="/static/images/repair.png" class="function-icon" mode="aspectFit" />
              <text class="function-text">维修保养</text>
            </view>
            <!-- <view class="function-item" @click="goToShopping">
              <image src="/static/images/reward.png" class="function-icon" mode="aspectFit" />
              <text class="function-text">购物有奖</text>
            </view> -->
            <view class="function-item" @click="goToPersonalService">
              <image src="/static/images/personal-styling.png" class="function-icon" mode="aspectFit" />
              <text class="function-text">美发</text>
            </view>
            <view class="function-item" @click="goToShortRent">
              <image src="/static/images/department.png" class="function-icon" mode="aspectFit" />
              <text class="function-text">短租公寓</text>
            </view>
            <!-- <view class="function-item" @click="goToLegalHelp">
              <image src="/static/images/legal-aid.png" class="function-icon" mode="aspectFit" />
              <text class="function-text">法律帮助</text>
            </view> -->
            <!-- <view class="function-item" @click="goToDriverCircle">
              <image src="/static/images/car-own.png" class="function-icon" mode="aspectFit" />
              <text class="function-text">车主圈</text>
            </view>
            <view class="function-item" @click="goToHealthCenter">
              <image src="/static/images/health.png" class="function-icon" mode="aspectFit" />
              <text class="function-text">健康中心</text>
            </view> -->
            <view class="function-item" @click="goToInsurance">
              <image src="/static/images/save.png" class="function-icon" mode="aspectFit" />
              <text class="function-text">司机保险</text>
            </view>
            <!-- <view class="function-item" @click="goToVehicleLoan">
              <image src="/static/images/repayment.png" class="function-icon" mode="aspectFit" />
              <text class="function-text">车租还款</text>
            </view> -->
          </view>
        </view>
      </view>
      
      <!-- 充电首享活动 -->
      <view class="promotion-section">
        <image src="https://app-1306761403.cos.ap-shanghai.myqcloud.com/driverLive_banner%403x.png" class="promotion-banner" mode="aspectFit" />
        <!-- <view class="promotion-content">
          <view class="promotion-title">充电首享</view>
          <view class="promotion-subtitle">领取充电减免券</view>
          <view class="coupon-image">
            <image src="/static/images/编组 10.png" class="coupon-icon" mode="aspectFit" />
          </view>
        </view> -->
      </view>
      
      <!-- 餐饮超市区域 -->
      <view class="food-section">
        <view class="section-header">
          <text class="section-title">餐饮</text>
          <!-- <view class="section-more" @click="goToFoodSupermarket">
            <text>查看更多</text>
            <uni-icons type="right" size="16" color="#999" />
          </view> -->
        </view>
        
        <view class="food-content">
          <view class="food-main-item" @click="goToFoodSupermarket">
            <view class="food-main-info">
              <image src="/static/images/fire.png" class="fire" mode="aspectFit" />
              <view class="food-main-tag">套餐低至18元</view>
            </view>
            <image src="https://app-1306761403.cos.ap-shanghai.myqcloud.com/driver_life/image%201262%403x.png" class="food-main-image" mode="aspectFill" />
          </view>
          
          <view class="food-side-items">
            <view class="food-side-item" @click="goToFoodSupermarket">
              <view>
								<view class="food-side-title">红烧肉18元</view>
								<view class="food-side-price">立即抢购></view>
							</view>
              <image src="https://app-1306761403.cos.ap-shanghai.myqcloud.com/driver_life/image%201096%403x.png" class="food-side-image" mode="aspectFit" />
            </view>
            
            <view class="food-side-item" @click="goToFoodSupermarket">
              <view>
								<view class="food-side-title">番茄炒蛋单份9块</view>
								<view class="food-side-price">立即抢购></view>
							</view>
              <image src="https://app-1306761403.cos.ap-shanghai.myqcloud.com/driver_life/image%201096%403x%281%29.png" class="food-side-image" mode="aspectFit" />
            </view>
          </view>
        </view>
      </view>
      
      <!-- 积分商城区域 -->
      <view class="points-section">
        <view class="section-header">
          <text class="section-title">超市</text>
          <!-- <view class="section-more" @click="goToPointsMall">
            <text>查看更多</text>
            <uni-icons type="right" size="16" color="#999" />
          </view> -->
        </view>
        
        <view class="points-content">
          <view class="points-main-item" @click="goToRewardCenter">
            <view style="padding:30rpx">
              <view class="points-main-tag">司机必备红牛</view>
              <view class="points-main-subtag">10元两罐</view>
              <view class="points-main-action">立即抢购</view>
              <image src="https://app-1306761403.cos.ap-shanghai.myqcloud.com/driver_life/Group%201321315139%403x.png" class="points-main-image" style="width: 124rpx; height: 128rpx; right: 28rpx;" mode="aspectFit" />
            </view>
          </view>
          
          <view class="points-grid">
            <view class="points-item" @click="goToRewardCenter">
              <view class="points-item-title">五月花纸巾</view>
              <view class="points-item-price">立即抢购></view>
              <image src="https://app-1306761403.cos.ap-shanghai.myqcloud.com/driver_life/image%201095%403x.png" class="points-item-image" mode="aspectFit" />
            </view>
            
            <view class="points-item" @click="goToRewardCenter">
              <view class="points-item-title">玻璃水</view>
              <view class="points-item-price">立即抢购></view>
              <image src="https://app-1306761403.cos.ap-shanghai.myqcloud.com/driver_life/image%201241%403x.png" class="points-item-image" mode="aspectFit" />
            </view>
          </view>
        </view>
      </view>

      <!-- 车辆租赁 -->
      <view class="points-section">
        <view class="section-header">
          <text class="section-title">车辆租赁</text>
          <!-- <view class="section-more" @click="goToPointsMall">
            <text>查看更多</text>
            <uni-icons type="right" size="16" color="#999" />
          </view> -->
        </view>
        
        <view class="points-content">
          <view class="points-main-item rent-main-item" @click="goToRentCar">
            <view style="padding:30rpx">
              <view class="points-main-tag">荣威d7</view>
              <view class="points-main-subtag">免押金、可周租、准新车、2025款</view>
              <view class="points-main-action rent-main-action">立即租</view>
              <image src="https://app-1306761403.cos.ap-shanghai.myqcloud.com/driver_life/image%201106%403x%281%29.png" class="points-main-image" style="width: 200rpx; height: 161rpx; right: 0; bottom: 0;" mode="aspectFit" />
            </view>
          </view>
          
          <view class="points-grid">
            <view class="points-item" @click="goToRentCar">
              <view class="points-item-title">别克v6</view>
              <view class="points-item-price">立即租赁></view>
              <image src="https://app-1306761403.cos.ap-shanghai.myqcloud.com/driver_life/image%201095%403x%281%29.png" class="points-item-image" style="width: 150rpx; height: 150rpx;" mode="aspectFit" />
            </view>
            
            <view class="points-item" @click="goToRentCar">
              <view class="points-item-title">广汽埃安s</view>
              <view class="points-item-price">立即租赁></view>
              <image src="https://app-1306761403.cos.ap-shanghai.myqcloud.com/driver_life/image%201241%403x%281%29.png" class="points-item-image" style="width: 150rpx; height: 150rpx;" mode="aspectFit" />
            </view>
          </view>
        </view>
      </view>

      <!-- 公寓 -->
      <view class="points-section" style="margin-bottom:120rpx">
        <view class="section-header">
          <text class="section-title">公寓</text>
          <!-- <view class="section-more" @click="goToPointsMall">
            <text>查看更多</text>
            <uni-icons type="right" size="16" color="#999" />
          </view> -->
        </view>
        
        <view class="points-content">
          <view class="points-main-item" @click="goToShortRent">
            <view style="padding:30rpx">
              <view class="points-main-tag">充电站内 停车减免</view>
              <view class="points-main-subtag">零元兑好礼 福利随心享</view>
              <view class="points-main-action">立即抢</view>
              <image src="https://app-1306761403.cos.ap-shanghai.myqcloud.com/driver_life/image%201106%403x%282%29.png" class="points-main-image" style="width: 250rpx; height: 195rpx; right: 0; bottom: 0;" mode="aspectFit" />
            </view>
          </view>
          
          <view class="points-grid">
            <view class="points-item" @click="goToShortRent">
              <view class="points-item-title" style="color:#000000">单间低至</view>
              <view class="points-item-price" style="color:#000000"><text style="color:#FF5136">38</text>元起</view>
              <image src="https://app-1306761403.cos.ap-shanghai.myqcloud.com/driver_life/image%201095%403x%282%29.png" class="points-item-image" style="width: 150rpx; height: 150rpx;" mode="aspectFit" />
            </view>
            
            <view class="points-item" @click="goToShortRent">
              <view class="points-item-title" style="color:#000000">4人间<text style="color:#FF5136">38</text>元起</view>
              <view class="points-item-price" style="color:#000000">洗衣服务</view>
              <image src="https://app-1306761403.cos.ap-shanghai.myqcloud.com/driver_life/image%201241%403x%282%29.png" class="points-item-image" style="width: 150rpx; height: 150rpx;" mode="aspectFit" />
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部导航栏 -->
    <smart-tabbar></smart-tabbar>
  </view>
</template>

<script>
import SmartTabbar from '@/components/smart-tabbar/index.vue'
import { getSystemInfo } from '@/utils/util.js'

export default {
  name: 'DriverLifeNew',
  components: {
    SmartTabbar
  },
  data() {
    return {
      statusBarHeight: 0
    }
  },
  onLoad() {
    // 获取状态栏高度
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight
    console.log(this.statusBarHeight,'this.statusBarHeight高度')
  },
  methods: {
    goToElectricCharging() {
      uni.redirectTo({
        url: '/pages/indexNew/index'
      })
    },
    
    goToFoodSupermarket() {
      uni.navigateTo({
        url: '/pages/driver-life/food-supermarket'
      })
    },
    
    goToFoodDetail() {
      uni.navigateTo({
        url: '/pages/driver-life/store-detail'
      })
    },
    
    goToRentCar() {
      uni.navigateTo({
        url: '/pages/driver-life/rent-car'
      })
    },
    
    goToMaintenance() {
      // 跳转到维修保养页面
      console.log('跳转到维修保养页面')
    },
    
    goToRewardCenter() {
      // 跳转到奖励中心页面
      console.log('跳转到奖励中心页面')
			uni.redirectTo({
			  url: '/pages/pointsMall/index'
			});
    },
    
    goToVehicleService() {
      // 跳转到维护保养页面
      console.log('跳转到维护保养页面')
      uni.navigateTo({
        url: '/pagesTwo/maintenance/index'
      })
    },
    
    goToShopping() {
      // 跳转到购物有奖页面
      console.log('跳转到购物有奖页面')
    },
    
    goToShortRent() {
      // 跳转到短租公寓页面
      console.log('跳转到短租公寓页面')
			uni.navigateTo({
				url: '/pages/driver-life/apartment',
			})
    },
    
    goToLegalHelp() {
      // 跳转到法律帮助页面
      console.log('跳转到法律帮助页面')
    },
    
    goToDriverCircle() {
      uni.navigateTo({
        url: '/pages/moments/index'
      })
    },
    
    goToPersonalService() {
      // 跳转到个人造型页面
      console.log('跳转到个人造型页面')
			uni.navigateTo({
				url: '/pages/driver-life/hairdressing',
			})
    },
    
    goToHealthCenter() {
      // 跳转到健康中心页面
      console.log('跳转到健康中心页面')
    },
    
    goToInsurance() {
      // 跳转到保险页面
      console.log('跳转到保险页面')
			uni.navigateTo({
				url: '/pages/driver-life/insurance',
			})
    },
    
    goToVehicleLoan() {
      // 跳转到车租还款页面
      console.log('跳转到车租还款页面')
    },
    
    goToPointsMall() {
      uni.switchTab({
        url: '/pages/shop/shop'
      })
    },
    
    goToPointsDetail() {
      uni.navigateTo({
        url: '/pages/shop/shop'
      })
    },
  }
}
</script>

<style scoped>
view {
  box-sizing: border-box;
  overflow: unset;
}
.lixing-life {
  width: 136rpx;
  height: 44rpx;
}
.seperator-line {
  width: 2rpx;
  height: 18rpx;
  background: #fff;
  margin: 0 14rpx;
  margin-top: 6rpx
}
.slogan {
  width: 194rpx;
  height: 44rpx;
}
.first-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  /* flex: 1; */
}
.first-row view {
  width: 25%;
}
.second-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.second-row view {
  width: 20%;
}
.fire {
  width: 28rpx;
  height: 28rpx;
  margin-right: 8rpx;
}
.driver-life-page {
  /* min-height: 100vh;
  background-color: #f5f5f5; */
  min-height: 100vh;
  width: 100%;
  /* background-image: linear-gradient(180deg, #32374B 0%, rgba(50,55,75,0) 100%); */
  display: flex;
  flex-direction: column;
  /* padding: 0 32rpx; */
  background: linear-gradient( 180deg, #32374B 0%, rgba(50,55,75,0) 100%);
}
.page-main {
  background: #FFFFFF;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
}

/* 顶部地图搜索区域 */
.map-header-section {
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
  padding-bottom: 30rpx;
}
.map-header-search {
  width: 378rpx;
  height: 64rpx;
  border-radius: 32rpx 32rpx 32rpx 32rpx;
  border: 2rpx solid #FFFFFF;
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  background: #FFFFFF;
}

.map-search-container {
  /* flex: 1; */
  display: flex;
  align-items: center;
  padding: 6rpx 8rpx;
  width: 130rpx;
  height: 64rpx;
  background: #FFFFFF;
  border-radius: 32rpx 32rpx 32rpx 32rpx;
  border: 2rpx solid #FFFFFF;
}

.map-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}
.map-text {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 24rpx;
  color: #333333;
  line-height: 29rpx;
}

.search-input {
  /* flex: 1; */
  font-size: 28rpx;
  color: #333;
  /* background: transparent; */
}

.search-placeholder {
  font-family: PingFang SC, PingFang SC;
  font-size: 26rpx;
  color: #999999;
}

.header-actions {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}

/* 位置信息 */
.location-section {
  padding: 20rpx 30rpx;
  background-color: #fff;
  /* margin-bottom: 20rpx; */
  border-radius: 20rpx 20rpx 0rpx 0rpx;
}

.location-info {
  display: flex;
  align-items: center;
}

.location-text {
  font-size: 28rpx;
  color: #333;
  margin-left: 8rpx;
}

/* 功能导航区 */
.function-nav-section {
  background-color: #fff;
  padding: 0 0 20rpx 0;
  /* margin-bottom: 20rpx; */
}

.function-grid {
  /* display: grid;
  grid-template-columns: repeat(5, 1fr); */
  padding: 0 20rpx;
  display: flex;
  flex-wrap: wrap;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.function-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 12rpx;
}
.function-icon-first {
  width: 56rpx;
  height: 56rpx;
  margin-bottom: 12rpx;
}

.function-text {
  font-size: 24rpx;
  color: #333;
}

/* 活动区域 */
.promotion-section {
  position: relative;
  margin: 0 30rpx 20rpx;
  border-radius: 20rpx;
  overflow: hidden;
}

.promotion-banner {
  width: 100%;
  height: 148rpx;
}

.promotion-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 40rpx;
}

.promotion-title {
  font-size: 40rpx;
  color: #fff;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.promotion-subtitle {
  font-size: 28rpx;
  color: #fff;
  margin-bottom: 20rpx;
}

.coupon-image {
  position: absolute;
  right: 40rpx;
  top: 50%;
  transform: translateY(-50%);
}

.coupon-icon {
  width: 180rpx;
  height: 180rpx;
}

/* 餐饮超市区域 */
.food-section {
  background-color: #fff;
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.section-more {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 28rpx;
}

.food-content {
  display: flex;
  gap: 20rpx;
}

.food-main-item {
  flex: 1;
  position: relative;
  border-radius: 12rpx;
  overflow: hidden;
  height: 240rpx;
  background: #F1F1F1;
  box-shadow: 0rpx 0rpx 36rpx 0rpx rgba(0,0,0,0.05);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.food-main-image {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 206rpx;
  height: 150rpx;
}

.food-main-info {
  /* position: absolute;
  bottom: 0;
  left: 0; */
  width: 100%;
  padding: 20rpx;
  /* background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); */
  display: flex;
  align-items: center;
}

.food-main-tag {
  font-size: 28rpx;
  color: #000000;
  font-weight: bold;
}

.food-side-items {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.food-side-item {
  flex: 1;
  background-color: #F8E9C8;
  border-radius: 12rpx;
  padding: 20rpx;
	padding-right: 10rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.food-side-title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 25rpx;
  color: #735730;
}

.food-side-price {
  font-size: 24rpx;
  color: #735730;
  /* font-weight: bold; */
  margin-top: 8rpx;
}

.food-side-subtitle {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 8rpx;
}

.food-side-action {
  font-size: 24rpx;
  color: #ff5a2c;
}
.food-side-action text {
  color: #735730;
}
.food-side-action image {
  width: 20rpx;
  height: 20rpx;
}
.ticket-item {
  background: #F8E9C8 url('@/static/images/ticket.png') no-repeat bottom right;
  background-size: 106rpx 86rpx;
}

.food-side-image {
  width: 80rpx;
  height: 80rpx;
}

/* 积分商城区域 */
.points-section {
  background-color: #fff;
  padding: 20rpx 30rpx;
}

.points-content {
  display: flex;
  gap: 20rpx;
}

.points-main-item {
  flex: 1;
  position: relative;
  border-radius: 12rpx;
  overflow: hidden;
  height: 272rpx;
  background: #FFF5E3;
  /* padding: 30rpx; */
  /* padding-right: 0; */
}
.rent-main-item {
  background: rgba(0,200,188,0.15);
}
.points-main-tag {
  font-size: 32rpx;
  color: #000000;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.points-main-subtag {
  font-size: 24rpx;
  color: #000000;
  margin-bottom: 20rpx;
}

.points-main-action {
  display: inline-block;
  background-color: #FB6C0E;
  color: #FFFFFF;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: bold;
}
.rent-main-action {
  background-color: #13B09F;
}

.points-main-image {
  position: absolute;
  width: 200rpx;
  height: 100rpx;
}

.points-grid {
  flex: 1;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 10rpx;
}

.points-item {
  background-color: #f5f5f5;
  border-radius: 12rpx;
  padding: 20rpx;
  position: relative;
}

.points-item-title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.points-item-price {
  font-size: 24rpx;
  color: #ff5a2c;
  /* font-weight: bold; */
}

.points-item-image {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 100rpx;
  height: 100rpx;
}
</style>